<template>
    <div id="SearchBar">
        <aside class="c-search">
            <van-search @search="onSubmit()" v-model="keywords" placeholder="请输入搜索关键词">
                <div @click="showPop=!showPop" class="c-search__btn" slot="left">{{activeCityName}}
                    <van-icon class="c-search__icon" name="arrow-down"/>
                </div>
            </van-search>
        </aside>
        <van-popup position="top" v-model="showPop">
            <div class="c-pop">
                <van-cell-group>
                    <van-cell :class="{active:activeCity===code}" :key="k" v-for="([code,t],k) in cityList" :title="t"
                              @click="onSubmit(code)"/>
                </van-cell-group>
            </div>
        </van-popup>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import {freeze} from "@/utils/logic";

    const cityList = freeze([
        [null, '全部'],
        [330100, '杭州市'],
        [330200, '宁波市'],
        [330300, '温州市'],
        [330400, '嘉兴市'],
        [330500, '湖州市'],
        [330600, '绍兴市'],
        [330700, '金华市'],
        [330800, '衢州市'],
        [330900, '舟山市'],
        [331000, '台州市'],
        [331100, '丽水市']
    ])
    @Component
    export default class SearchBar extends Vue implements ComponentOptions<Vue> {
        name = "SearchBar"
        cityList = cityList;
        activeCity = null;
        showPop = false;
        keywords = "";
        get activeCityName() {
            return this.cityList.find(([code]) => code === this.activeCity)[1]
        }
        onSubmit(code) {
            this.showPop = false;
            code && (this.activeCity = code);
            this.$emit('search',{keywords:this.keywords,code:this.activeCity})
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #SearchBar {
        .c-pop {
            padding: 55px 0 6px;
            .active {
                color: #349e7e;
                font-weight: bold;
            }
        }
        .c-search {
            z-index: 999999;
            @include absoluteFull(fixed);
            bottom: auto;
            box-shadow: 0 2px 3px #f4f4f4;
            &__btn {
                font-size: 14px;
                vertical-align: middle;
                padding: 0 16px 0 12px;
            }
            &__icon {
                vertical-align: middle;
                margin-left: 8px;
                margin-top: -2px;
            }
        }
    }
</style>
